<template>
   <div v-if="row">
     <van-nav-bar
       :title="row.s_name"
       left-text="返回"
       left-arrow
       @click-left="onClickLeft"
     />
     <div class="head_box">
       <img :src="row.s_icon">
     </div>
     <div class="cont_box">
       <div class="c_head">
         <h1 class="name">{{row.s_name}}</h1>
         <h1 class="money"><span style="font-size: 28rem;">￥</span>{{row.s_ticket}} <span style="font-size:30rem;color:#ccc">起</span></h1>
         <div style="clear: both;"></div>
       </div>
       <p class="address">
         <span v-for="v in row.s_addressName">
           {{v}}
         </span>
        {{row.s_address}}
       </p>
       <p class="title">{{row.s_title}}</p>
       <p class="content">{{row.s_content}}</p>
       <p class="kf">
         开放时间：
       </p>
       <p class="kf_time">
         <span v-for="v in row.s_month">{{v}} </span>
         (
         <span v-for="v in row.s_open">{{v}} </span>
         <span v-for="v in row.s_week">{{v}} </span>
         )
       </p>
       <div class="room">
         <van-card
           :price="row.s_ticket"
           :title="row.s_name"
           :thumb="row.s_icon">
            <template #tags>
              <van-tag plain type="danger">好玩</van-tag>
              <van-tag plain type="danger">实惠</van-tag>
            </template>
            <template #footer>
              <van-button size="small" type="info" @click="onBook">预订</van-button>
            </template>
          </van-card>
       </div>
     </div>
   </div>
</template>

<script>
  export default{
    data(){
      return{
        id:null,
        row:null
      }
    },
    methods:{
      onClickLeft:function(){
        this.$router.push({path:'/scenic_search'});
      },
      onLoad:function(){
        var that=this

        var toast_load=this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration:0
        });

        this.$axios.post('/index.php/scenic/row',this.$qs.stringify({id:this.id})).then(
          (res)=>{
            if(res.data.code==1){
              toast_load.clear();

              that.row=res.data.data.row;
            }else{
              toast_load.clear();

              that.$toast.fail(res.data.msg);

              setTimeout(function(){that.onClickLeft},1300);
            }
          }
        ).catch(
          (res)=>{
            that.$toast.fail('网络繁忙');
          }
        )
      },
      onBook:function(){
        var that=this

        var toast_load=this.$toast.loading({
          message: '购买中...',
          forbidClick: true,
          duration:0
        });

        this.$axios.post('/index.php/scenic/book_btn',this.$qs.stringify({id:this.id})).then(
          (res)=>{
            if(res.data.code==1){
              toast_load.clear();

              that.$toast({
                type:'success',
                message:'购买成功'
              });
            }else{
              toast_load.clear();

              that.$toast.fail(res.data.msg);
            }
          }
        ).catch(
          (res)=>{
            that.$toast.fail('网络繁忙,稍后再试');
          }
        )
      }
    },
    created() {
      this.id=typeof(this.$route.query.id)

      if(this.id!='undefined'){
        this.id=this.$route.query.id;

        this.onLoad();
      }
    }
  }
</script>

<style scoped>
  .kf{
    font-size:38rem;
    margin:20rem 0;
  }
  .kf_time{
    font-size:32rem;
    margin-left:20rem;
  }
  .title{
    font-size:30rem;
    margin:30rem 10rem;
  }
  .content{
    font-size:34rem;
    line-height: 70rem;
    margin-left:20rem;
  }
  .head_box{
    width:100%;
    height:360rem;
  }
  .head_box img{
    width:100%;
    height:100%;
  }
  .cont_box{
    padding:20rem;
    color:#474747;
  }
  .cont_box .c_head h1{
    width:50%;
    float:left;
    font-size:40rem;
    height:60rem;
    line-height: 60rem;
  }
  .cont_box .c_head .name{
    color:#474747;
  }
  .cont_box .c_head .money{
    color:#ff5555;
    text-align: right;
  }
  .cont_box .address{
    margin:10rem 0;
  }
  .cont_box .room{
    margin:40rem 0;
  }
  .van-card .van-card__title{
    font-size:28rem;
    padding-bottom:20rem;
  }
  .van-card .van-card__price-integer{
    color:#FF5555;
  }
  .van-card .van-card__price-currency{
    color:#FF5555;
  }
</style>
